<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		* {
			padding: 0px;
			margin: 0px;
		}
		.container {
			width: 100%;
			height: 200px;
			/* border: 1px solid red; */
			text-align: center;
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: space-around;
			background-color: #323232;
		}

		.container .navBar {
			width: 680px;
			height: 120px;
			border: 1px solid red;
			line-height: 80px;
			display: flex;
		}
		/* 等分 */
		.navBar > .bar {
			flex: 1;
			height: 80px;
			margin: auto;
			/* border: 1px solid red; */
			background-color: #fefefe;
		}
		/* 画三角形 */
		.navBar .san1 {
			width: 0px;
			height: 0px;
			margin: auto;
			border-top: 40px solid #fefefe;
			border-left: 40px solid #323232;
			border-bottom: 40px solid #fefefe;
			border-right: 10px solid #fefefe;
		}
		.navBar .san2 {
			width: 0px;
			height: 0px;
			margin: auto;
			border-top: 40px solid #fefefe;
			border-right: 40px solid #323232;
			border-bottom: 40px solid #fefefe;
			border-left: 10px solid #fefefe;
		}

		.bl {
			width: 0px;
			height: 0px;
			border-top: 10px solid #9b8651;
			border-left: 10px solid #fefefe;
			margin-top: 80px;
			float: left;
			display: none;
		}

		.br {
			width: 0px;
			height: 0px;
			border-top: 10px solid #9b8651;
			border-right: 10px solid #fefefe;
			margin-top: 80px;
			float: right;
			display: none;
		}

		/* hover改变选项框的样式 */
		.navBar .bar:hover {
			background-color: #ffd30d;
			margin-top: 10px;
		}

		.navBar .bar:hover .bl {
			display: flex;
		}
		.navBar .bar:hover .br {
			display: flex;
		}
	</style>
	<body>
		<div class="container">
			<div class="navBar">
				<div class="san1"></div>
				<div class="bar">
					Home
					<div class="bl"></div>
					<div class="br"></div>
				</div>
				<div class="bar">
					About
					<div class="bl"></div>
					<div class="br"></div>
				</div>
				<div class="bar">
					Services
					<div class="bl"></div>
					<div class="br"></div>
				</div>
				<div class="bar">
					Contact
					<div class="bl"></div>
					<div class="br"></div>
				</div>
				<div class="san2"></div>
			</div>
		</div>
	</body>
</html>
